import React, { PureComponent } from 'react';

function Header() {
  console.log("Header被调用");

  return (
    <h2>我是Header组件</h2>
  )
}


class Banner extends PureComponent {
  render() {
    console.log("Banner 的render函数被调用");

    return (
      <h2>我是Banner组件</h2>
    );
  }
}

function ProductList() {
  console.log("ProductList被调用");
  return (
    <div>
      <ul>
        <li>商品列表1</li>
        <li>商品列表2</li>
        <li>商品列表3</li>
        <li>商品列表4</li>
        <li>商品列表5</li>
      </ul>
    </div>
  )
}


class Main extends PureComponent {
  render() {
    console.log("Main render 函数被调用");
    return (
      <div>
        <Banner></Banner>
        <ProductList></ProductList>
      </div>
    );
  }
}

function Footer() {
  console.log("Footer 被调用");

  return (
    <h2>我是Footer组件</h2>
  )
}

class App extends PureComponent {
  constructor() {
    super();
    this.state = {
      count: 0,
    }
   }

  render() {
    return (
      <div>
        <h2>当前计数：{this.state.count}</h2>
        <button onClick={e => { this.changeCount() }}>+1</button>
        <Header></Header>
        <Main></Main>
        <Footer></Footer>
      </div>
    );
  }
  changeCount() {
    this.setState({
      count: this.state.count + 1
    })

  }
}


export default App;